<template>
    <div class="house-pr">
        <van-cell-group v-for="item in houseData.splice(0,3)" :key="item.id">
          <van-cell>
            <template #default>
              <van-image :src="item.image_url" />
              <div class="house-detail">
                <strong class="information-title" style="font-size:12px;" >{{item.zh_name}} </strong>
                <span class="information-title" style="color:#666;">{{item.description}}</span>
                <span style="color:red;">￥{{ getPrice(item.price) }}起</span>
              </div>
            </template>
          </van-cell>
      </van-cell-group> 
  </div>
</template>

<script setup>
import {ref, onMounted } from 'vue'
import {getAllCategories } from '@/api/category' // 接口

// 家电数据 
const houseData = ref([]) 


// 加载数据
onMounted(async () => {
  // 根据id 
  const res = await getAllCategories()
  houseData.value = res.data[7].products
    
  console.log('家电数据',  houseData.value);
})
  // 去小数点
  const getPrice = (value) => {
    return parseFloat(value).toFixed(0)
  }
</script>


<style lang="scss" scoped>
    .house-pr{
    margin-top: 10px;
    display: flex;
    justify-content:space-evenly;

    .van-cell{
      padding: 0;
      margin: 0;
      width: 108px;
      .van-cell__value{
        .van-image{
          width: 106px;
        }
      }
    }
      .house-detail{
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-size: 10px;
        .information-title {
          width: 90%;   /*一定要设置宽度，或者元素内含的百分比*/
          overflow:hidden; /*溢出的部分隐藏*/
          white-space: nowrap; /*文本不换行*/
          text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
        }
      }
     }
</style>